<template>
    <div class="box">
        <div class="login">
            <el-tabs type="border-card" class="tabs-card" stretch>
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-user"></i> 账号登录</span>
                    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="账号" prop="empUacc">
                            <el-input v-model="form.empUacc"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="empUpwd">
                            <el-input v-model="form.empUpwd" type="password"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-phone-outline"></i> 扫码登录 </span>
                    登录
                </el-tab-pane>
            </el-tabs>

            <div class="control-account">
                <el-checkbox v-model="isKeep" label="记住密码" />
                <el-link type="primary">忘记密码</el-link>
            </div>
            <el-button type="primary" class="login-btn" @click="loginAciton">立即登录</el-button>
        </div>
    </div>
</template>


<script>

import { login as doLogin } from '@/api/auth'

export default {
    data() {
        return {
            form: {
                empUacc: undefined,
                empUpwd: undefined
            },
            rules: {
                uacc: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
                ],
                upwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
                ],
            },
            isKeep: false
        }
    },
    methods: {
        loginAciton() {
            this.$refs.ruleForm.validate((valid) => {
                if (!valid) {
                    return;
                }
                doLogin(this.form).then(r => {
                    if (r.code == 200) {
                        sessionStorage.setItem("loginEmp", JSON.stringify(r.data));
                        console.log(r.data);
                        this.$message.success(r.msg);
                        this.$router.push("/");
                        return;
                    }
                    this.$message.error(r.msg);
                    this.form = {};
                    // this.$refs.username.focus();
                })
            })
        }
    }

}
</script>

<style scoped>
.login {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
}

.el-tabs {
    width: 400px;
    display: block;
}

.tabs-card {
    text-align: center;
}


.control-account {
    margin-top: 12px;
    display: flex;

    justify-content: space-between;
}

.login-btn {
    margin-top: 10px;
    width: 100%;
}

.box {
    position: relative;
    height: 100vh;
    background: url('../assets/login-bg.svg');
}
</style> 